<template>
	<view class="baseForm">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="umodel" :rules="rules" ref="uForm" class="form" labelWidth="160rpx"
			errorType="toast">
			<u-form-item label="加工单">
				<u--input v-model="umodel.workOrderCode" inputAlign="right" clearable border="none"
					:disabled='true'></u--input>
			</u-form-item>
			<u-form-item label="工作中心" prop="workCenterName">
				<u--input v-model="umodel.workCenterName" inputAlign="right" clearable border="none"
					:disabled='true'></u--input>
			</u-form-item>
			<u-form-item label="物料编号" prop="materialCode" @click="openMaterialSelect">
				<u--input v-model="umodel.materialCode" border="none" disabled disabledColor="#ffffff"
					inputAlign="right" placeholder="请选择物料"></u--input>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>

			<u-form-item label="包装数量" prop="requestQuantity">
				<u--input v-model="umodel.requestQuantity" placeholder="请填写包装数量" inputAlign="right" clearable
					border="none"></u--input>
			</u-form-item>
			<u-form-item label="包装规格" prop="">
				<u--input v-model="umodel.specification" placeholder="包装规格" inputAlign="right" clearable
					:disabled='true' border="none"></u--input>
			</u-form-item>
		</u--form>
		<!-- 提交按钮 -->
		<button type="primary" @click="submit" class="submit_btn" :loading="posting">提 交</button>

		<!-- 标准picker -->
		<u-picker :show="showplant" :columns="materialList" keyName="productionMaterialCode" immediateChange
			@cancel="showplant = false" @confirm="plantSelect"></u-picker>
	</view>
</template>

<script lang="ts" setup>
	import { useDictionaryStore } from '../../../stores/useDictionaryStore';
	import { useProduceStore } from '../../../stores/useProduceStore';
	import { useUserStore } from '../../../stores/useUserStore';
	import { http } from '../../../utils/http';
	import { computed, reactive, ref } from 'vue';
	// 表单数据定义
	const umodel = reactive({
		workOrderId: '',
		workOrderCode: '',
		workOrderName: '',
		workCenterId: '',
		workCenterCode: '',
		workCenterName: '',
		materialId: '',
		materialCode: '',
		requestQuantity: '',
		specification: '',
		productionMaterialId: '',
		productionMaterialCode: '',
	});
	// 登录工作组信息
	const loginWorkInfo = computed(() => JSON.parse(useUserStore().loginWorkInfo));
	console.log("loginWorkInfo", loginWorkInfo.value)
	umodel.workCenterName = loginWorkInfo.value.workCenterName
	umodel.workCenterCode = loginWorkInfo.value.workCenterName.split("-")[0]
	umodel.workCenterId = loginWorkInfo.value.workCenterId
	// 加工单信息
	const workOrderList = computed(() => JSON.parse(useProduceStore().workOrderList));
	console.log("workOrderList", workOrderList.value)
	umodel.workOrderCode = workOrderList.value != [] ? workOrderList.value[0]?.workOrderCode : '';
	umodel.workOrderId = workOrderList.value != [] ? workOrderList.value[0]?.workOrderId : '';
	const unit = useDictionaryStore().filterDictList('MeasurementUnit')

	console.log(unit)
	// 表单规则定义
	const rules = ref({
		workOrderName: [
			{
				type: 'string',
				required: true,
				message: '填写加工单',
				trigger: ['blur', 'change']
			},
		],
		workCenterName: [
			{
				type: 'string',
				required: true,
				message: '请填写工作中心',
				trigger: ['blur', 'change']
			},
		],
		materialCode: {
			type: 'string',
			required: true,
			message: '请选择物料',
			trigger: ['blur', 'change']
		},
		requestQuantity: {
			type: 'string',
			required: true,
			message: '填写要货数量',
			trigger: ['blur', 'change']
		},
		specification: {
			type: 'string',
			required: true,
			message: '请填写规格',
			trigger: ['blur', 'change']
		}
	});

	function openMaterialSelect() {
		showplant.value = true;
		uni.hideKeyboard();
	}

	const showplant = ref(false);


	//物料获取
	let materialList = reactive([[]]);
	getMaterialList()
	async function getMaterialList() {
		try {
			await http({
				method: 'POST',
				url: '/mes/mesmaterialrequest/getMaterialList',
				data: {
					id: workOrderList.value[0].id,
				}
			}).then((res) => {
				materialList[0] = res.data;
				console.log("物料选择", materialList)
			})

		} catch (e) {
			console.log(e);
		}
	}

	// 校验提交
	const uForm = ref();
	const posting = ref(false);
	function submit() {
		uForm.value.validate().then(async (res) => {

			console.log('传输数据', umodel);
			posting.value = true;
			// 请求
			await http({
				method: 'POST',
				url: '/mes/mesmaterialrequest/save',
				data: {
					packagingQuantity: umodel.requestQuantity,
					...umodel
				}
			}).then((res) => {
				if (res.code == "200") {
					uni.$u.toast('缺料要货成功');
					uni.redirectTo({
						url: '/pages/produce/shortMaterials/index'
					})
				}
			})
		});
	}
	function plantSelect(e) {
		console.log(e)
		if (e.value.length) {
			umodel.materialId = e.value[0].productionMaterialId;
			umodel.materialCode = e.value[0].productionMaterialCode;
			umodel.specification = e.value[0].matQuantity;

		}
		umodel.workCenterCode = loginWorkInfo.value.workCenterName.split("-")[0]
		showplant.value = false;
	}
</script>

<style lang="scss">
	.baseForm {
		.form {
			padding: $uni-page-padding;
		}

		.u-form-item {
			min-height: 46px;
		}

		:deep(.uicon-arrow-right) {
			top: 1px;
			margin-left: 3px;
		}

		.submit_btn {
			margin: 60rpx;
			border-radius: 60rpx;
		}

		:deep(.u-form-item__body__right__content__slot) {
			flex-direction: row-reverse;
		}

		:deep(.u-textarea__field) {
			text-align: right;
		}

		.u-textarea {
			border: 1px solid $uni-input-border-color;
			border-radius: 8px;
		}
	}
</style>